"use client";
import { Card, List, Typography, Pagination, Spin } from "antd";
import { memo } from "react";
import "./index.css";

interface LikeItem {
    id: number;
    subjectId: number;
    subjectName: string;
    createdTime: string;
}

interface GoodBagProps {
    data: {
        pageNo: number;
        pageSize: number;
        total: number;
        totalPages: number;
        result: LikeItem[];
    };
    onPageChange: (page: number, pageSize: number) => void;
    loading?: boolean;
}

const GoodBag: React.FC<GoodBagProps> = ({ data, onPageChange, loading = false }) => {
    const handlePageChange = (page: number, size: number) => {
        onPageChange(page, size);
    };

    return (
        <div className="good-bag-container">
            <Spin spinning={loading}>
                <List
                    dataSource={data.result}
                    renderItem={(item) => (
                        <List.Item>
                            <Card className="like-item">
                                <Typography.Text
                                    className="like-title"
                                    onClick={() =>
                                        window.open(`/brush-question/${item.subjectId}`)
                                    }
                                >
                                    {item.subjectName}
                                </Typography.Text>
                                <div className="like-meta">
                                    <span>点赞时间: {item.createdTime}</span>
                                </div>
                            </Card>
                        </List.Item>
                    )}
                />
            </Spin>
            <div className="pagination-wrapper">
                <Pagination
                    current={data.pageNo}
                    pageSize={data.pageSize}
                    total={data.total}
                    onChange={handlePageChange}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total) => `共 ${total} 条记录`}
                />
            </div>
        </div>
    );
};

export default memo(GoodBag);